<template>
    <div class="OrderConfirm" @touchmove.prevent>
        <div class="n_hadgetgoods">
            <div class="reminder">
                <div class="maleri30 bop">
                    <div class="message">
                        <p>温馨提示：</p>
                        <p>1.限时特价、预约资格等购买优惠可能一并取消</p>
                        <p>2.如遇订单拆分、使用优惠券无法返还</p>
                        <p>3.支付金额，抵扣余额积分都按原路退款</p>
                        <p>4.订单一旦取消，无法恢复</p>
                    </div>
                </div>
            </div>
            <div class="resonalist list7 detailsfloo">
                <div class="maleri30">
                    <div class="myorder returnreson p">
                        <a href="javascript:void(0)">
                            <div class="order">
                                <div class="fl">
                                    <span class="firde">退款原因：</span>
                                    <span id="user_note">{{
                                        checkSeason
                                    }}</span>
                                </div>
                                <div
                                    class="fr"
                                    @click="checkSeasonkey = !checkSeasonkey"
                                >
                                    <i class="Mright"></i>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="myorder p">
                        <span class="tp-left-label">联 系 人 : </span>
                        <input
                            v-model="canclOrderInfo.consignee"
                            class="tp-right-cont"
                            type="text"
                            name="consignee"
                            id="consignee"
                            value=""
                        />
                    </div>
                    <div class="myorder p">
                        <span class="tp-left-label">手 机 号 : </span>
                        <input
                            class="tp-right-cont"
                            type="tel"
                            name="mobile"
                            id="mobile"
                            v-model="canclOrderInfo.mobile"
                            value=""
                        />
                    </div>
                </div>
            </div>

            <div class="applyandreyurn ma-to-30">
                <a href="javascript:;" @click="btnSubmit()">申请退款</a>
            </div>
        </div>

        <!-- 推出按钮 -->
        <div class="j_cancel_order" @click="closeProps"></div>

        <!-- 申请退款原因 -->
        <van-popup v-model="checkSeasonkey" position="bottom">
            <div class="losepay closeorder" style="display: block">
                <div class="maleri30">
                    <div class="l_top">
                        <span>取消原因</span>
                        <em
                            class="turenoff"
                            @click="checkSeasonkey = !checkSeasonkey"
                        ></em>
                    </div>
                    <div class="resonco">
                        <div
                            class="radio"
                            v-for="(item, index) in canclOrderInfo.reason_list"
                            :key="index"
                        >
                            <span
                                class="che"
                                :class="{
                                    check_t: checkSeason == item,
                                }"
                                @click="
                                    (checkSeason =
                                        checkSeason == item ? '' : item),
                                        (checkBtn =
                                            checkSeason == '' ? false : true)
                                "
                            >
                                <i></i>
                                <span>{{ item }}</span>
                            </span>
                        </div>
                    </div>
                </div>
                <a
                    ><div
                        class="submits_de"
                        :class="{ bagrr: checkBtn }"
                        @click="checkSeasonkey = !checkSeasonkey"
                    >
                        确定
                    </div></a
                >
            </div>
        </van-popup>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast } from 'vant';
export default {
    name: '',
    props: ['order_id'],
    data() {
        return {
            checkSeasonkey: false, // 退款原因弹窗
            checkSeason: '',
            checkBtn: true, // 退款愿意按钮

            canclOrderInfo: {
                consignee: '',
                mobile: '',
            },
        };
    },
    computed: {},
    mounted() {
        // console.log(this.order_id);
        this.getCanclOrderInfo();
    },
    methods: {
        // 关闭弹窗
        closeProps() {
            this.$emit('cancelorderCance', false);
        },
        // 点击申请退款
        btnSubmit() {
            if (!this.checkSeason) {
                return Toast({
                    message: '请选择退款原因',
                    duration: 2000,
                });
            }
            if (!this.canclOrderInfo.consignee || !this.canclOrderInfo.mobile) {
                return Toast({
                    message: '请输入联系人信息',
                    duration: 2000,
                });
            }
            if (
                !/^1[3456789]\d{9}$/.test(
                    this.canclOrderInfo.mobile.replace(/\s+/g, '')
                )
            ) {
                return Toast({
                    message: '请输入正确的手机号码',
                    duration: 2000,
                });
            }

            axiosPost(
                '/api/order/record_refund_order',
                {
                    order_id: this.order_id,
                    user_note: this.checkSeason,
                    consignee: this.canclOrderInfo.consignee,
                    mobile: this.canclOrderInfo.mobile,
                },
                (res) => {
                    // console.log(res);
                    Toast({
                        message: res.msg,
                        duration: 2000,
                    });
                    if (res.status != 1) {
                        return;
                    }
                    this.$emit('cancelorderCance', true);
                }
            );
        },
        // 获取取消订单信息
        getCanclOrderInfo() {
            axiosPost(
                '/api/order/refund_order',
                {
                    order_id: this.order_id,
                },
                (res) => {
                    // console.log(res);

                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.checkSeason = res.data.reason_list[0];
                    this.canclOrderInfo = res.data;
                }
            );
        },
    },
};
</script>

<style lang="less" scope>
.OrderConfirm {
    position: fixed;
    left: 0;
    top: 1.87733rem;
    height: 100%;
    width: 100%;
    background: #f9f8f8;

    .j_cancel_order {
        position: fixed;
        left: 0;
        top: 0;
        width: 1.87733rem;
        height: 1.87733rem;
        z-index: 99999999999999;
        background: transparent;
    }

    .radio i {
        margin-top: -0.1rem;
    }

    .losepay {
        position: initial;
        display: none;
        z-index: 999;
        width: 16rem;
        background-color: white;
        bottom: auto;
    }
}
</style>
